/*
    * @moudule:@/views/home/incomeCompleted
    * @author:zengfx
    * @date:2020-10-19
    * 收入完成
 */

<template>
  <div class="productView_container">
    <header>
      <p>收入完成</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="账期:">
          <el-date-picker size="mini" v-model="formInline.accountPeriod" value-format="yyyyMM" type="month" placeholder="选择月" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="main_navBar">
        <div class="area">
          <div class="it" v-for="(item, index) in areaList" :key="index" @click="changeArea(index)">
            <span class="td">{{ item.label }}</span>
            <span>-></span>
          </div>
        </div>
      </div>
      <el-table size="mini" :header-cell-style="{background:'#eef1f6'}" :data="tableData" border style="width: 100%" v-loading="showTableLoading">
        <el-table-column prop="areaName" label="本地网" width="160"></el-table-column>
        <el-table-column align="center" v-for="(item, index) in titleList" :key="index" :label="item">
          <el-table-column align="center" label="主营预算" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.thisYearBudget || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.thisYearBudgetjb || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.thisYearBudgetdm || 0}}</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.thisYearBudgetdi || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="累计完成" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.thisYearBudgetLj || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.thisYearBudgetLjjb || 0 }}</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.thisYearBudgetLjdm || 0}}</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.thisYearBudgetLjdi || 0}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="增长率" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.tbYearInrease || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.tbYearInreasejb || 0 }}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.tb_year_inreasedm || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.tb_year_inreasedi || 0 }}%</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="完成率" width="140">
            <template slot-scope="scope">
              <span class="num" style="cursor: pointer" v-if="item == '主营收入'">{{ scope.row.completeYearBudget || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '基本面收入'">{{ scope.row.completeYearBudgetjb || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == '码号收入'">{{ scope.row.completeYearBudgetdm || 0}}%</span>
              <span class="num" style="cursor: pointer" v-if="item == 'DICT收入'">{{ scope.row.completeYearBudgetdi || 0}}%</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';

export default {
    data() {
        return {
            formInline: {
                areaId: '',
                accountPeriod: ''
            },
            tableData: [],
            titleList: ['主营收入', '基本面收入', '码号收入', 'DICT收入'],
            showTableLoading: false,
            areaIds: [],
            areaNames: [],
            areaList: [],
            pickerOptions: this.pickerDisabled(),
            disabledTime: ''
        };
    },
    mounted() {},
    methods: {
        handle_search() {
            this.showTableLoading = true;
            $budgetAPI.revenueCompletion(
                this.formInline,
                res => {
                    if (res.code == 0) {
                        this.tableData = res.content.data;
                        this.areaIds = res.content.areaIds.split(',');
                        this.areaNames = res.content.areaNames.split('->');
                        this.areaList = [];
                        this.areaIds.map((it, i) => {
                            var o = {
                                label: this.areaNames[i],
                                value: this.areaIds[i]
                            };
                            this.areaList.push(o);
                        });
                    }
                    this.showTableLoading = false;
                },
                err => {
                    this.showTableLoading = false;
                }
            );
        },
        handle_export() {},
        handleSelect(key) {
            this.activeIndex = '' + key;
        },
        getMonth() {
            $budgetAPI.incomeKeepRegionalMonth(
                { maximum: 10 },
                res => {
                    if (res.code == 0) {
                        this.formInline.accountPeriod = res.content;
                        this.disabledTime = res.content;
                        this.handle_search();
                    }
                },
                err => {
                    console.log(err);
                }
            );
        },
        pickerDisabled() {
            let self = this;
            return {
                disabledDate(time) {
                    if (self.disabledTime) {
                        var timeyear = time.getFullYear();
                        var timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = '0' + timemonth;
                        }
                        var currentdate = timeyear.toString() + timemonth.toString();
                        if (currentdate > self.disabledTime) {
                            return true;
                        }
                    }
                }
            };
        }
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.formInline.areaId = this.accountInfo.areaId;
        // this.formInline.areaName = this.accountInfo.areaName;
        this.getMonth();
    }
};
</script>

<style lang="scss" scoped>
.productView_container {
    width: 100%;
    height: 100%;
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .area {
                text-align: left;
                display: flex;
                .it {
                    cursor: pointer;
                    font-size: 14px;
                    display: inline-block;
                    .td {
                        font-weight: bold;
                    }
                    &:last-child {
                        span {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
